<template>
    <div class="category">
        <div>
            <van-search v-model="value" placeholder="请输入搜索关键词" >
                <span slot="left"><van-icon name="arrow-left" size="30px" color="#C0C1C3"/></span>
            </van-search>
        </div>
        <div>
            <div class="side-left">
                <van-sidebar v-model="activeKey" @change="onChange">
                    <van-sidebar-item title="热门推荐" />
                    <van-sidebar-item title="手机数码" />
                    <van-sidebar-item title="家用电器" />
                    <van-sidebar-item title="电脑办公" />
                    <van-sidebar-item title="计生情趣" />
                    <van-sidebar-item title="美妆护肤" />
                    <van-sidebar-item title="个护清洁" />
                    <van-sidebar-item title="汽车生活" />
                    <van-sidebar-item title="京东超市" />
                </van-sidebar>
            </div>
            <div class="side-right">{{side}}</div>
        </div>
    </div>
</template>

<script>
  import Vue from 'vue';
  import { Search,Sidebar, SidebarItem,Icon} from 'vant';
  Vue.use(Search).use(Sidebar).use(SidebarItem).use(Icon)
  export default {
    name: "Category",
    data(){
      return{
        value:'',
        activeKey: 0,
        side:'0'
      }
    },
    methods:{
      onChange(index){
        this.side = index
      }
    }
  }
</script>

<style scoped>
    .side-left{
        float: left;
    }
</style>
